<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-table @change="tablePaginationChange" :pagination="pagination" bordered :dataSource="dataSource"
        :columns="columns" :rowKey="(record,index)=> index">
        <img class="user-img" slot-scope="text, record" :src="record.logo" slot="logo" />
      </a-table>
    </a-card>

  </page-header-wrapper>
</template>

<script>
  import {
    STable,
    Ellipsis
  } from '@/components'
  import {
    userList
  } from '@/api/user'
  export default {
    components: {
      STable,
      Ellipsis
    },
    data() {
      return {
        pagination: {
          current: 1, //默认当前叶数
          total: 0, // 数据总数 如果不设置就以绑定的数据量为准
          pageSize: 10, // 默认每页条数
          showSizeChanger: true, //是否可以改变 pageSize
          pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
          showTotal: total => this.$t('共') + ' ' + `${total}` + ' ' + this.$t('条数据'), // 分页中显示总的数据
          hideOnSinglePage: false // 只有一页时是否隐藏分页器 true为不显示 false为显示
        },
        dataSource: [],
        columns: [{
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            width: 100,
          },
          {
            title: '头像',
            key: 'logo',
            width: 100,
            dataIndex: 'logo',
            scopedSlots: {
              customRender: 'logo'
            }
          }, {
            title: '昵称',
            dataIndex: 'nickname',
            key: 'nickname',
          },
          {
            title: '联系电话',
            dataIndex: 'phone',
            key: 'phone',
          },
          {
            title: '创建时间',
            dataIndex: 'create_time',
            key: 'create_time',
          },
        ],
      }
    },
    created() {
      this.getList()
    },
    methods: {
      tablePaginationChange(e) {
        this.pagination = e
        this.getList()
      },
      getList() {
        userList({
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }).then(res => {
          this.pagination.total = res.data.totalCount
          res.data.data.forEach(resp => {
            resp.create_time = this.getDate(resp.create_time)
          })
          this.dataSource = res.data.data
        })
      },
      getDate(stamp) {
        var date = new Date(stamp * 1000)
        return date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? ('0' + (date.getMonth() + 1)) : date.getMonth() +
          1) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      }
    }
  }
</script>
<style scoped>
  .user-img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
  }
</style>